<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-index-bar :index-list="indexList">
      <div v-for="(item, index) in cityItem" :key="index">
        <van-index-anchor :index="item.letter">
          {{item.letter}}
        </van-index-anchor>
        <van-cell
          v-for="(item2, index) in item.cityName" :key="index"
          :title="item2"
          @click="onCity(item2)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getLocation, getHot } from '@/api/location.js'
import { mapState } from 'vuex'
export default {
  name: 'myCityList',
  data () {
    return {
      locationList: [],
      hotLocationList: {
        cityName: [],
        letter: '热'
      },
      curCity: {
        cityName: [],
        letter: '#'
      },
      indexList: [],
      cityItem: [] // 城市项
    }
  },

  computed: {
    ...mapState(['currentCity'])
  },

  created () {
    this.order()
  },

  methods: {
    onClickLeft () {
      this.$router.back()
    },
    // 加载当前城市名字
    loadCurCity () {
      this.curCity.cityName.push(this.currentCity)
    },
    // 请求热门城市列表
    async getHotCity () {
      const res = await getHot()
      // this.hotLocationList.cityName = [...res.data.body]
      const newArr = res.data.body.map(item => {
        return item.label
      })
      this.hotLocationList.cityName = newArr
    },
    // 请求获取城市列表
    async getLocationList () {
      const res = await getLocation()
      console.log(res.data.body)
      this.locationList = res.data.body // 得到城市列表
    },
    // 获取字母列表
    getAlphabet () {
      for (let i = 0; i <= 25; i++) {
        this.indexList.push(String.fromCharCode((65 + i)))
      }
      this.indexList.unshift('#', '热') // 得到字母列表
      console.log(this.indexList)
    },
    // 得到城市分组列表
    getCityItem () {
      this.indexList.forEach((item) => {
        this.cityItem.push({ letter: item, cityName: [] })
      })
      this.locationList.forEach((item1) => { // item1是每一个城市信息对象
        const initial = item1.short.slice(0, 1).toUpperCase() // 每一个城市名字的首字母
        this.cityItem.forEach((item2) => { // item2是每一个城市项
          if (item2.letter === initial) {
            item2.cityName.push(item1.label)
          }
        })
      })
      console.log(123)
      this.cityItem.splice(0, 1, this.curCity) // 加入当前城市
      this.cityItem.splice(1, 1, this.hotLocationList) // 加入热门城市
      console.log(this.cityItem)
    },
    // 保证执行顺序的方法
    async order () {
      this.loadCurCity()
      await this.getHotCity()
      await this.getLocationList()
      this.getAlphabet()
      this.getCityItem()
    },
    // 点击转换当前城市
    onCity (val) {
      this.$store.commit('onCurrentCity', val)
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='less'>
// nav-bar
/deep/.van-nav-bar__content {
  background-color: #16A77A;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left:before {
  color: #fff;
}
</style>
